<template>
  <div>
    <common-head :title="title" />
    <div class="wrap2">
      <!-- 轮播 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="img in pics" :key="img.id">
          <img :src="img.pic" alt="" />
        </van-swipe-item>
      </van-swipe>
      <!-- /轮播 -->
      <p class="price">￥{{ basicInfo.minPrice }}</p>
      <h2>{{ basicInfo.name }}</h2>
      <div class="content" v-html="content"></div>
    </div>
    <!-- 弹出层 -->
    <van-popup v-model="show" round closeable position="bottom" :style="{ height: '27%' }">
      <div>
 <van-card
  :num="sku.num"
  :price="sku.minPrice"
  :title="sku.name"
  :thumb="sku.pic"
>

  <template #footer>
<van-stepper v-model="sku.num" />
    <van-button @click="addCart(sku.id)" type="danger" size="large">确定</van-button>
  </template>
</van-card>
      </div>
    </van-popup>
    <!-- 提交购物车 -->
    <van-goods-action>
  <van-goods-action-icon icon="home-o" text="首页" @click="$router.push('/home')" />
  <van-goods-action-icon :badge="$store.state.cart.items.length||''" icon="cart-o" text="购物车" @click="$router.push('/cart')" />
  <van-goods-action-button
    type="danger"
    text="加入购物车"
    @click="show=true"
  />
</van-goods-action>
  <!-- 提交购物车 -->
  </div>
</template>

<script>
import CommonHead from 'components/CommonHead'
import { fetchItemDetail, addCart } from 'api'
import { isLogin, getToken } from 'utils'
import { Toast } from 'vant'
export default {
  name: 'detail',
  data () {
    return {
      title: '商品详情',
      basicInfo: {},
      pics: [],
      content: '',
      show: false,
      sku: {
        // 商品规格
      }
    }
  },
  created () {
    this.fetchDetail()
  },
  methods: {
    fetchDetail () {
      fetchItemDetail(this.$route.query.id).then((res) => {
        if (res.data.code === 0) {
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.title = this.basicInfo.name
          this.content = res.data.data.content.replace(/<img/gi, '<img style="display:block;width: 100%"')
          this.sku = res.data.data.basicInfo
        }
      })
    },
    addCart (id) {
      const path = this.$route.path
      if (!isLogin()) {
        Toast.fail({
          message: '请登录',
          duration: 1000,
          onClose: () => {
            this.$router.push({
              path: '/login',
              query: {
                from: path
              }
            })
          }
        })
        return false
      }
      addCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          Toast.success({
            message: '加入成功，请前往购物车结算',
            onClose: () => {
              this.show = false
            }
          })
          this.$store.commit('cart/set_items', res.data.data.items)
        }
      })
    }
  },
  components: {
    CommonHead
  }
}
</script>

<style lang="scss" scoped>
.wrap2 {
  padding-top: 46px;
  padding-bottom: 50px;
  .my-swipe{
    img {
        width: 100%;
      }
    }
  }
.price {
  font-size: 22px;
  color: #e60000;
  margin-left: 12px;
  text-align: left;
}
</style>
